<link rel="stylesheet" href="css/home.css" />

<div  ms-controller="home">
<!-- Carousel -->
<div id="carouselHome" class="carousel slide" data-ride="carousel">
	<!-- 指示器 -->
	<ol class="carousel-indicators">
		<li data-target="#carouselHome" data-slide-to="0" class="active"></li>
		<li data-target="#carouselHome" data-slide-to="1"></li>
		<li data-target="#carouselHome" data-slide-to="2"></li>
		<li data-target="#carouselHome" data-slide-to="3"></li>
	</ol>

	<!-- 滑动内容 -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<!-- src="img/home/home_slide1.png" -->
			<img ms-attr-src='slide4Img' alt="First slide" >
				<div class="carousel-caption">
					<a class="btn btn-mybtn2 btn-mybtn3" href="./xjk.html" role="button">了解详情</a>
			    </div>
		</div>
		
		<div class="item">
			<!-- src="img/home/home_slide1.png" -->
			<img ms-attr-src='slide1Img' alt="First slide" >
				<div class="carousel-caption">
			        <img class="carouselPauseBt" ms-click="showVideoPage" style="cursor: pointer;" ms-mouseover='mouseHover' ms-mouseout='mouseOut' src="img/pause-button.png" />
			    </div>
		</div>

		<div class="item">
			<img ms-attr-src='slide2Img' alt="First slide">
			<div class="carousel-caption secondSlide">
				<a class="btn btn-mybtn2" href="https://jinshuju.net/f/foTFCM" role="button">立刻申请</a>
			</div>
		</div>

		<div class="item">
			<img ms-attr-src='slide3Img' alt="First slide">
		</div>

	</div>

	<!-- 控制器 -->
	<a class="myCarouselControl left" href="#carouselHome" role="button" data-slide="prev">
		<img src="img/slide-left.png" aria-hidden="true" ms-mouseover='mouseHover' ms-mouseout='mouseOut'></img>
	</a>
	
	<a class="myCarouselControl right" href="#carouselHome" role="button" data-slide="next">
		<img src="img/slide-right.png" aria-hidden="true" ms-mouseover='mouseHover' ms-mouseout='mouseOut'></img>
	</a>
	
</div>

<!--Features Block area-->
<div class="container-fluid featuresBlockArea">
	<div class="container">
		<!--<h1>好度科技为您带来基础教育的革命</h1>-->
		<div class="row">
			<div class="col-sm-4">
				<div class="thumbnail" ms-click='showFeaturesPromo(0)'>
					<img src="img/home/microlesson.png">
					<div class="caption">
						<!--<h3>随时随地录制微课</h3>-->
						<p>一个PAD一支笔，随时、随地、任意、任性、想怎么录就怎么录</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="thumbnail" ms-click='showFeaturesPromo(1)'>
					<img src="img/home/interactive.png">
					<div class="caption">
						<!--<h3>课堂互动与课后互动</h3>-->
						<p>学生基础不一致，如何发现？如何解决？如何给个别学生讲解？</p>
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="thumbnail" ms-click='showFeaturesPromo(2)'>
					<img src="img/home/cloudplatform.png">
					<div class="caption">
						<!--<h3>统一的云平台</h3>-->
						<p>无论是习题资源、课程视频、微课资料，云平台帮你轻松解决。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--Promot Area-->
	<div id='home_features_block_slide' class="row homePromotArea">
		<div id="carouselHomePromot" class="carousel slide" data-ride="carousel" data-interval="false">
			<!-- 指示器 -->
			<ol class="carousel-indicators">
				<li data-target="#carouselHomePromot" data-slide-to="0" class="active"></li>
				<li data-target="#carouselHomePromot" data-slide-to="1"></li>
				<li data-target="#carouselHomePromot" data-slide-to="2"></li>
			</ol>

			<!-- 滑动内容 -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="img/home/card_microlesson.png" alt="First slide">
					<div class="carousel-caption">
						<img class="cardCloseBt" src="img/home/card_close.png" ms-click='dismissFeaturesPromo'/>
						<div class="infoArea">
							<h2>随时随地录微课</h2>
							<p>传统微课录制，需要几十万造价的录播教室——高清投影、互动白板、多个机位、声音采集。这还不算老师们的化妆服装、紧张忘词、摄像准备、后期剪辑。UDO教学辅助系统，只需要一台平板电脑，即可记录教师教学过程。用低50倍的录制成本，完成高效的课程录制，更能够直接推送到每个学生的眼前。</p>
						</div>
		    			</div>
				</div>

				<div class="item">
					<img src="img/home/card_interactive.png" alt="First slide">
					<div class="carousel-caption">
						<img class="cardCloseBt" src="img/home/card_close.png"  ms-click='dismissFeaturesPromo'/>
						<div class="infoArea">
							<h2>课前导学</h2>
							<p>高二的电化学课程，需要高一的氧化还原知识作为基础。“氧化还原的概念，就有快一半的学生都忘了。”厦门某中学的高老师在和我们交流时，经常说类似的情况。UDO教学辅助系统，让高老师在周末，花五分钟录制一段小课程，直接推送给班内基础不好的几名学生。按照校长的话说，“从没有如此方便的实现过分层教学”。</p>
						</div>
		    			</div>
				</div>

				<div class="item">
					<img src="img/home/card_cloudplatform.png" alt="First slide">
					<div class="carousel-caption">
						<img class="cardCloseBt" src="img/home/card_close.png"  ms-click='dismissFeaturesPromo'/>
						<div class="infoArea">
							<h2>统一的云平台</h2>
							<p>云储存与云平台架构，是21世纪第二个十年刚刚兴起的新概念。UDO教学辅助系统，使用统一高效的云平台架构，让每一个学校打破硬件的限制——无论有没有自有机房，有没有服务器和系统，都可以享受移动互联网带给教育行业的收益。正所谓低成本才能真正做到广泛使用，只有广泛使用才能真正推进教育公平。</p>
						</div>
		    			</div>
				</div>
			</div>
			
			<!-- 控制器 -->
			<a class="myCarouselControl left" href="#carouselHomePromot" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			
			<a class="myCarouselControl right" href="#carouselHomePromot" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
	
		</div>
	</div>
</div>

<!--Features Detail Area-->
<div class="container-fluid featuresDetailArea backgroundWhite">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-xs-12 featuresDetailItemPic">
				<img src="img/home/product2.jpg" />
			</div>
			<div class="col-sm-5 featuresDetailItemText col-xs-12">
				<h3>UDO学生端2.0</h3>
				<p>UDO学生端让学生了解自己的学习情况，帮助学生有针对性的学习，可以反复观看老师上传的课堂视频和题目视频，解决学习上的问题，时刻与老师进行互动。UDO学生端是学生们的学习小助手！</p>
				<a type="button" class="btn btn-mybtn" href="#!/show/udostudent.html">了解详情</a>
			</div>
		</div>
	</div>
</div>
<div class="container-fluid featuresDetailArea">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 featuresDetailItemText secondTextArea">
				<h3>UDO教师端2.0</h3>
				<p>UDO教师端拥有备课、发布作业、录制并上传视频等功能，方便了讲师对课程以及题目的讲解，也方便了对学生的提问进行答疑，让讲师时刻了解学生的学习新动态。UDO教师端为教师们减轻了重复答疑的负担！</p>
				<a type="button" class="btn btn-mybtn" href="#!/show/udoteacher.html">了解详情</a>
			</div>
			<div class="col-sm-5 featuresDetailItemPic secondPicArea">
				<img src="img/home/product1.jpg" />
			</div>
		</div>
	</div>
</div>
<!--<div class="container-fluid featuresDetailArea backgroundWhite">
	<div class="container">
		<div class="row">
			<div class="col-md-6 featuresDetailItemPic">
				<img src="img/home/product.png" />
			</div>
			<div class="col-md-5 featuresDetailItemText">
				<h3>独具特色的微课制作</h3>
				<p>  我们的产品老是改 只是占位。我们的产品老是改 只是占位。我们的产品老是改 只是占位。我们的产品老是改 只是占位。我们的产品老是改 只是占位。我们的产品老是改 只是占位。我们的产品老是改 只是占位。</p>
				<a type="button" class="btn btn-mybtn" href="javascript:void(0)">了解详情</a>
			</div>
		</div>
	</div>
</div>-->

<!--News area-->
<div class="container-fluid newsArea">
	<div class="container">
		<h1>新闻热点</h1>
		<p>探寻新世界，总有新发现</p>
		<div class="row">
			<div class="col-sm-4">
				<div class="thumbnail">
					<div class="aa">
					<!--<a href="#!/home/nankai_news.html" >-->
					<img src="img/home/news1.jpg" class="img-responsive" >
					<div  class="nankai_news"><p>南开小伙“在线教育”创业 让更多人享受优质教育资源</p> </div>
				<!--	<div ms-mouseout='newsImgOut'  class="mask"></div>-->
				<!--	<div ms-mouseover='maskTextHover'  class="maskText">南开小伙“在线教育”创业 让更多人享受优质教育资源</div>-->
					<!--</a>-->
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="thumbnail">
					<div class="aa">
					<img src="img/home/home_News2.jpg" class="img-responsive" >
					<div class="uneng_news"><p>2015优能中学项目负责人会议展示情况汇报</p> </div>
					<!--<div ms-mouseout='newsImgOut'  class="mask"></div>
					<div ms-mouseover='maskTextHover'  class="maskText">2015优能中学项目负责人会议展示情况汇报</div>-->
					</div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="thumbnail">
					<div class="aa">
					<img src="img/home/news3.jpg" class="img-responsive" >
					<div class="xiamen_news"><p>UDO辅助教学系统进驻厦门双十中学漳州分校</p> </div>
					<!--<div ms-mouseout='newsImgOut'  class="mask"></div>
					<div ms-mouseover='maskTextHover'  class="maskText">UDO辅助教学系统进驻厦门双十中学漳州分校</div>-->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!--视频播放页--2015.5.13--JackYan-->  
  		<embed style="display: none;" id="myEmbed" wmode="opaque" src="http://player.56.com/v_MTM3MjMxMTk0.swf" flashvars="tgid=1030_qq-enuotxduoy&loading_deco_version=on&ban_ad=on&ban_top_panel=on&ban_share_btn=off&ban_over_panel=on" type="application/x-shockwave-flash" ms-css-width="{{videoWidth}}" ms-css-height="{{videoHeight}}" allowfullscreen="true" allownetworking="all" allowscriptaccess="always"></embed> 	
			<!--<video style="display: none;" id="myEmbed" src="href=http://www.56.com/u45/v_MTM3MjMxMTk0.html"   ms-css-width="{{videoWidth}}" ms-css-height="{{videoHeight}}" ></video>--> 	
	         <!--<embed style="display: none;" id="myEmbed" flashvars="tgid=1030_qq-enuotxduoy&loading_deco_version=off&ban_ad=on&ban_top_panel=on&ban_share_btn=off&ban_over_panel=on" src="http://player.youku.com/player.php/sid/XOTYwMTM0ODEy/v.swf" allowFullScreen="true" quality="high" ms-css-width="{{videoWidth}}" ms-css-height="{{videoHeight}}" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>-->

</div>
<style>
.aa div{top:0; position: absolute;z-index: 100;background-color: rgba(0,0,0,0.3);display: none;cursor: pointer;}
.aa div p{color:white;font-size: 20px;text-align: left;}
</style>
 
<script>
	$(".aa").hover(function(){
		var imgWidth=$(this).find("img").width();var imgHeight=$(this).find("img").height();	
		if(document.body.clientWidth>768){
			$(this).find("div").css({"width":imgWidth,"height":imgHeight+5,"padding-top":imgHeight/2-20}).fadeToggle().click(function(){
			window.location.href="#!/home/"+$(this).attr("class")+".html"
		   });
		}else{
			$(this).find("div").css({"width":imgWidth,"height":imgHeight+5,"padding-top":imgHeight/2-20}).toggle().click(function(){
			window.location.href="#!/home/"+$(this).attr("class")+".html"
		  });
		}
		
	})
</script>